<template>
  <div class="gl-play-video dib vat" :style="{width, height}">
    <video class="w100 h100 vam video-inner"
           :class="{'video-stop': videoStop}"
           :src="video.src || src"
           :poster="video.poster || poster"
           :autoplay="autoplay"
           :loop="loop"
           @play="play"
           @load="load"
           ref="video"
           :muted="muted"
           :controls="controls"
           webkit-playsinline
           x-webkit-airplay
           playsinline
           x5-playsinline></video>
    <img :src="video.poster || poster" v-if="videoStop" class="w100 h100 vam" alt="">
    <div class="controls">
      <div class="play dib vam"></div>

      <span class="time"></span>
      <div class="full-screen dib vam"></div>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex';

  export default {
    name: "GlPlayVideo",
    computed: {
      ...mapGetters(['userInfo', 'productInfo']),
    },
    props: {
      videoStop: {
        type: Boolean,
        default: false,
      },
      controls: {
        type: Boolean,
        default: true,
      },
      muted: {
        type: Boolean,
        default: false,
      },
      loop: {
        type: Boolean,
        default: false,
      },
      autoplay: {
        type: Boolean,
        default: false,
      },
      addPlayRecord: {
        type: Boolean,
        default: true,
      },
      video: {
        type: Object,
        default() {
          return {}
        },
      },
      src: {
        type: String,
        default: ''
      },
      poster: {
        type: String,
        default: ''
      },
      width: {
        type: String,
        default: '100%',
      },
      height: {
        type: String,
        default: '100%',
      }
    },
    watch: {
      videoStop(val) {
        if (val) {
          this.$refs.video.pause();
        } else {
          this.$refs.video.play();
        }
      }
    },
    methods: {
      load(e) {
        // console.log(e);
      },
      play(e) {
        this.addRecord();
        this.$emit('play', e);
      },
      addRecord() {
        if (this.addPlayRecord) {
          this.http.$post('api/user/add_resources_record', {
            uid: this.userInfo.uid,
            resource_id: this.video.id,
            type: 1,
            ...this.productInfo,
          }).catch(console.log);
        }
      },
    },
    created() {
    },
  }
</script>

<style scoped lang="less">
  .gl-play-video {
    .video-inner {
      object-fit: fill;
    }
    .video-stop {
      display: none;
    }
  }
</style>
